<template>
	<template v-for="({ data }, index) in goods">
		<RouterLink :to="{
			name: 'goods',
			params: {
				id: parseInt((Math.random() * 100) as unknown as string)
			}
		}">
			<div class="bg-white mb-4 flex   space-y-2  rounded-md overflow-hidden">
				<div class="mx-auto w-24 h-24 overflow-hidden shrink-0">
					<LazyImage :src="data.thumb_url" />
				</div>
				<div class="grow px-2">
					<div class="h-10 text-sm line-clamp-2">
						{{ data.name }}
					</div>
					<div class="flex items-center mt-1 space-x-2 text-xs ">
						<div class="px-2 text-red-400 bg-red-100 rounded-lg ">满减</div>
						<div class="px-2 text-orange-400 bg-orange-100 rounded-lg ">满减</div>
					</div>
					<div class="flex items-center justify-between mt-1 text-sm">
						<div class="text-sm text-red-500">¥399.99</div>
						<div class="text-xs text-gray-400">395人付款</div>
					</div>
				</div>
			</div>
		</RouterLink>
	</template>
</template>
    
<script setup lang='ts'>
const goods = inject<GoodsList>('goods', []);
</script>
    
<style></style>